<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单结算</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<!-- 顶部导航栏 -->
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">XXXX酒店<span class="layui-badge">9</span></a>
			</li>
			<li class="layui-nav-item" lay-unselect="" style="float: right;">
				<a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:;">购物车</a></dd>
					<dd><a href="javascript:;">订单结算</a></dd>
					<dd><a href="javascript:;">注销</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item" style="float: right;">
				<a href="">个人中心<span class="layui-badge-dot"></span></a>
			</li>
		</ul>

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">订单确认</li>
			</ul>
		</div>

		<table class="layui-table" lay-skin="line">
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead style="margin: 10px ;">
				<tr>
					<th colspan="5">订单号：1231325645646</th>
				</tr>
			</thead>
			<thead>
				<tr>
					<th>房间图片</th>
					<th>房间类型</th>
					<th>房间价格</th>
					<th>预定数量</th>
					<th>小计</th>

				</tr>
			</thead>
			<tbody>
				<tr style="height: 100px;">
					<td><img src="img/111.jpg"></td>
					<td>大床房</td>
					<td>￥180</td>
					<td>1</td>
					<td>￥540</td>
				</tr>
				<tr style="height: 40px;">
					<td colspan="5" style="text-align: center;font-size: 18px;font-weight: 700px;">总价：￥2222</td>
				</tr>
				<tr style="height: 40px;">
					<td colspan="2">选择住客信息:
					</td>
					<td colspan="2">
						<span id="guestInf">
							<input type="radio" name="zk" checked="checked"/>姓名：张三&nbsp;&nbsp;&nbsp;&nbsp;身份证号：51090219954562&nbsp;&nbsp;&nbsp;&nbsp;手机号：18583631262<br>
							<input type="radio" name="zk" />姓名：李四&nbsp;&nbsp;&nbsp;&nbsp;身份证号：51090219954562&nbsp;&nbsp;&nbsp;&nbsp;手机号：18583631262<br>
						</span>
					</td>
					<td colspan="1" style="text-align: left;">
						<!-- <button data-method="notice" class="layui-btn">新&nbsp;&nbsp;&nbsp;增</button> -->
						<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
							<button data-method="notice" class="layui-btn">新&nbsp;&nbsp;&nbsp;增</button>
						</div>
					</td>
				</tr>
				<tr style="height: 60px;">
					<td colspan="2">下单时间：2018-12-13</td>
					<td colspan="2">订单状态：未支付</td>
					<td colspan="1" style="text-align: left;">
						<a href="http://www.layui.com" class="layui-btn">支&nbsp;&nbsp;&nbsp;付</a>
						<a href="http://www.layui.com" class="layui-btn layui-btn-danger">取&nbsp;&nbsp;&nbsp;消</a>
					</td>
				</tr>
			</tbody>
		</table>





		<script src="layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

		<script>
			layui.use('layer', function(){ //独立版的layer无需执行这一句
  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
  
  //触发事件
  var active = {
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '当你选择该窗体时，即会在最顶端'
        ,area: ['390px', '260px']
        ,shade: 0
        ,maxmin: true
        ,offset: [ //为了演示，随机坐标
          Math.random()*($(window).height()-300)
          ,Math.random()*($(window).width()-390)
        ] 
        ,content: '//layer.layui.com/test/settop.html'
        ,btn: ['继续弹出', '全部关闭'] //只是为了演示
        ,yes: function(){
          $(that).click(); 
        }
        ,btn2: function(){
          layer.closeAll();
        }
        
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      });
    }
    ,confirmTrans: function(){
      //配置一个透明的询问框
      layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
        time: 20000, //20s后自动关闭
        btn: ['明白了', '知道了', '哦']
      });
    }
    ,notice: function(){
      //示范一个公告层
      layer.open({
        type: 2
        ,title: false //不显示标题栏
        ,closeBtn: true
        ,area: ['550px', '350px']
        ,shade: 0.8
		,shadeClose: true
		,anim: 4
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
       /* ,btn: ['新增', '取消'] */
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '新增信息.html'
        ,success: function(layero){
          var btn = layero.find('.layui-layer-btn');
          btn.find('.layui-layer-btn0').attr({
            href: 'http://www.layui.com/'
            ,target: '_blank'
          });
        }
      });
    }
    ,offset: function(othis){
      var type = othis.data('type')
      ,text = othis.text();
      
      layer.open({
        type: 1
        ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo'+type //防止重复弹出
        ,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };
  
  $('#layerDemo .layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });
  
});
			//页码
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;
				laypage.render({
					elem: 'demo1',
					count: 70 //数据总数
						,
					jump: function(obj) {
						console.log(obj)
					}
				});
				laypage.render({
					elem: 'demo2',
					count: 70 //数据总数
						,
					jump: function(obj) {
						console.log(obj)
					}
				});
			});

			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});


			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>

	</body>
</html>
